<template>
  <div class="w-full">
    <!-- Hero section -->
    <section id="hero" class="w-full pb-24">
      <BaSection>
        <div
          class="col-span-12 lg:col-span-6 mt-12 xl:mt-10 space-y-4 sm:space-y-6 px-6 text-center sm:text-left"
        >
          <span
            data-aos="fade-right"
            data-aos-once="true"
            class="text-base text-gradient font-semibold uppercase text-[2.5rem]"
            >企业数字化转型之道</span
          >
          <h1
            data-aos="fade-right"
            data-aos-once="true"
            class="text-[2.5rem] sm:text-5xl xl:text-5xl font-bold leading-tight capitalize sm:pr-8 xl:pr-10"
          >
            数字中台开发空间<span class="text-header-gradient text-[4.5rem]">SaaS应用设计</span
            >数据驱动+AI
          </h1>
          <p
            data-aos="fade-down"
            data-aos-once="true"
            data-aos-delay="300"
            class="paragraph hidden sm:block"
          >
            指出发展数字经济是把握新一轮科技革命和产业变革新机遇的战略选择，是新一轮国际竞争重点领域，我们一定要抓住先机，抢占未来发展制高点。
            ——习近平
          </p>
          <div
            data-aos="fade-up"
            data-aos-once="true"
            data-aos-delay="700"
            class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-2"
          >
            <BaseButton
              :onclick="goToLogin"
              class="max-w-full px-8 py-4 bg-gradient-to-r from-[#468ef9] to-[#0c66ee] border border-[#0c66ee] text-white"
            >
              进入系统
            </BaseButton>
          </div>
        </div>
        <div class="hidden sm:block col-span-12 lg:col-span-6">
          <div class="w-full">
            <img data-aos="fade-up" data-aos-once="true" :src="heroImage" class="-mt-4" alt="" />
          </div>
        </div>
        <img
          data-aos="fade-up"
          data-aos-delay="300"
          :src="ellipse1"
          class="hidden sm:block absolute bottom-12 xl:bottom-16 left-4 xl:left-0 w-6"
        />
        <img
          data-aos="fade-up"
          data-aos-delay="300"
          :src="ellipse2"
          class="hidden sm:block absolute top-4 sm:top-10 right-64 sm:right-96 xl:right-[32rem] w-6"
        />
        <img
          data-aos="fade-up"
          data-aos-delay="300"
          :src="ellipse3"
          class="hidden sm:block absolute bottom-56 right-24 w-6"
        />
        <img
          data-aos="fade-up"
          data-aos-delay="300"
          :src="star"
          class="hidden sm:block absolute top-20 sm:top-28 right-16 lg:right-0 lg:left-[30rem] w-8"
        />
      </BaSection>
    </section>

    <!-- Crypto statistic section -->
    <section
      class="max-w-screen-xl mx-2 sm:mx-auto px-4 sm:px-6 lg:px-0 py-6 pb-20 sm:py-8 rounded-[2.25rem] sm:rounded-xl bg-white shadow-lg sm:shadow-md transform lg:-translate-y-12"
    >
      <div class="w-full flex flex-col lg:flex-row items-center justify-center">
        <LandingCryptoStatistic
          data-aos="fade-up"
          title="🔥 BaaS"
          img="baas.jpeg"
          :datasets="trendings"
          class="xl:border-r border-gray-200 lg:px-8"
        />
        <LandingCryptoStatistic
          data-aos="fade-up"
          data-aos-delay="150"
          title="👰 Big Data"
          img="bdata.png"
          :datasets="topGainers"
          class="xl:border-r border-gray-200 lg:px-8"
        />
        <LandingCryptoStatistic
          data-aos="fade-up"
          data-aos-delay="300"
          title="💎 Artificial Intelligence"
          img="ai.png"
          :datasets="recents"
          class="lg:px-8"
        />
      </div>
    </section>

    <!-- Buy and trade section -->
    <section class="w-full my-24">
      <BaSection>
        <LandingBuyTradeImage class="mb-12" />
        <div class="col-span-16 lg:col-span-6 mt-4 xl:mt-20 space-y-6 px-4">
          <h2 class="text-4xl font-semibold sm:pr-8 xl:pr-12">
            公安安全数字化转型，大幅度减少基层工作 <br class="sm:block" />
            升级公共安全，让百姓生活在更安全的社会环境
          </h2>
          <p class="paragraph"> 大幅度减少基层工作 40% </p>
        </div>
      </BaSection>
    </section>

    <section class="bg-partner sm:mx-6 shadow sm:rounded-2xl overflow-hidden">
      <div
        class="w-full px-6 sm:px-0 py-16 flex flex-col items-center justify-center space-y-4 text-center"
      >
        <h3 class="text-2xl text-neutral-800 font-semibold"> 低代码中台模式 </h3>
        <p class="paragraph transition"
          >企业数字化转型，利用平台能力，企业数字赋能，成本更低，效益更高，从客户到生产。</p
        >
      </div>
    </section>

    <!-- Credit card section -->
    <section class="w-full my-36">
      <BaSection>
        <div class="col-span-12 lg:col-span-7">
          <div class="w-full">
            <img src="src/assets/img/hotel.png" class="w-[95%]" alt="" />
          </div>
        </div>
        <div class="col-span-12 lg:col-span-5 space-y-6 px-4 sm:px-6 mt-20">
          <h2 class="text-4xl font-semibold">
            关于 <span class="text-header-gradient">交通</span> 数字化
          </h2>
          <p class="paragraph"
            >在5G、AI、大数据等互联网技术的加持下，汽车早已不是简单的从甲地到乙地的交通工具。自动驾驶、OTA（Over-the-Air
            Technology：空中下载技术）、车联网……这才是未来时代汽车应有的模样。一个安全安心、节能环保、充满科技感的可移动空间，正是日立所致力于实现的。</p
          >
          <ul class="space-y-4 sm:space-y-2">
            <li>车</li>
            <li>路</li>
            <li>人</li>
          </ul>
          <BaseButton
            class="w-full sm:max-w-[240px] px-10 py-4 bg-inherit text-gradient border border-[#0c66ee] text-base"
            >进入</BaseButton
          >
        </div>
      </BaSection>
    </section>
    <!-- Industry-leading security section -->
    <section class="w-full my-24">
      <div class="relative max-w-screen-xl px-8 mx-auto grid grid-cols-12 gap-x-6">
        <div class="col-span-12 lg:col-span-6">
          <div class="w-full">
            <img src="src/assets/img/dental-care.png" class="w-full" alt="" />
          </div>
        </div>
        <div class="col-span-12 lg:col-span-5 space-y-8 sm:space-y-6 mt-8 xl:px-8">
          <h2 class="text-4xl font-semibold">医院管理的信息化</h2>
          <ul class="space-y-8 sm:space-y-4">
            <li>
              <p class="text-sm text-gray-700 leading-relaxed">
                数字医疗是把现代计算机技术、信息技术应用于整个医疗过程的一种新型的现代化医疗方式，是公共医疗的发展方向和管理目标。数字医疗设备的出现，大大丰富了医学信息的内涵和容量。从一维信息的可视化，如心电（ECG）和脑电（EEG）等重要的电生理信息；到二维信息，如CT、MRI、彩超、数字X线机（DR）等医学影像信息；进而三维可视化，甚至可以获得四维信息，如实时动态显示的三维心脏。这些信息极大地丰富了医生的诊断技术，使医学进入了一个全新的可视化的信息时代。
                在美国退伍军人事务部公布的 2016 预算中，将移动医疗和数字医疗作为投资重点，划出 12
                亿美元投资数字医疗项目。
                <span class="underline">更多</span> 医疗服务的个性化
              </p>
            </li>
            <li title="Hardware security keys">
              <p class="text-sm text-gray-700 leading-relaxed">
                管理者可以通过网络随时了解医院的运营情况及各部门的工作情况，使医院始终处于最佳运行状态。而且，医院可以随时为病人提供各种所需信息。
              </p>
            </li>
            <li title="SOC Certifications">
              <p class="text-sm text-gray-700 leading-relaxed">
                数字化医疗 <span class="underline">SOC </span>
                <span class="underline">SOC 2 Type 2</span
                >数字化医疗可以实现医院内部设备资源的共享，实现影像及文档资料的传输，缩短病人挂号、交费、取药、看病的时间以及电子开单、电子处方，减少错误发生的概率。在远程医疗方面，数字化医疗可以实现远程教学及电视会议、远程会诊及手术、网上查询及求助以及网上挂号、预约，从而实现全球资源的共享。
              </p>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
  // import { PageWrapper } from '/@/components/Page';
  import { defineComponent } from 'vue';
  // import { Menu, MenuItem, Avatar } from 'ant-design-vue';
  import { menuItemList } from './data';
  import BaSection from './components/BaSection.vue';
  import LandingCryptoStatistic from './components/LandingCryptoStatistic.vue';
  import BaseButton from './components/BaseButton.vue';
  import LandingBuyTradeImage from './components/BuyTradeImage.vue';
  import LandingListItem from './components/LandingListItem.vue';
  import LandingTradingToolImage from './components/LandingTradingToolImage.vue';

  import heroImage from '/@/assets/img/hero-image.png';
  import ellipse1 from '/@/assets/img/pattern/ellipse-1.png';
  import ellipse2 from '/@/assets/img/pattern/ellipse-2.png';
  import ellipse3 from '/@/assets/img/pattern/ellipse-3.png';
  import nefacc from '/@/assets/img/nefa-cc.webp';
  import star from '/@/assets/img/pattern/star.png';

  import {
    trendings,
    topGainers,
    currencySelected,
    recents,
    currencies,
    cryptoSelected,
    cryptocurrencies,
    steps,
    accordions,
  } from './data';

  import AOS from 'aos';
  import 'aos/dist/aos.css';
  import { router } from '/@/router';
  import { PageEnum } from '/@/enums/pageEnum';

  function goToLogin() {
    router.replace(PageEnum.BASE_LOGIN);
  }

  export default defineComponent({
    components: {
      BaSection: BaSection,
      LandingCryptoStatistic,
      BaseButton,
      // eslint-disable-next-line vue/no-unused-components
      LandingBuyTradeImage,
      //LandingListItem,
      //LandingTradingToolImage,
    },

    setup() {
      AOS.init({ disable: 'phone' });

      return {
        menuItemList,
        heroImage,
        ellipse1,
        ellipse2,
        ellipse3,
        star,
        nefacc,
        trendings,
        topGainers,
        currencySelected,
        recents,
        currencies,
        cryptoSelected,
        cryptocurrencies,
        steps,
        accordions,
        BaSection,
        LandingCryptoStatistic,
        BaseButton,
        LandingBuyTradeImage,
        LandingListItem,
        LandingTradingToolImage,
        goToLogin,
      };
    },
  });
</script>

<style scoped>
  .text-header-gradient {
    background: rgb(57, 132, 244);
    background: linear-gradient(
      169.4deg,
      #3984f4 -6.01%,
      #0cd3ff 36.87%,
      #2f7cf0 78.04%,
      #0e65e8 103.77%
    );
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .bg-partner {
    background: url('/src/assets/img/partner/background.png');
    background-size: cover;
    background-position: center;
  }
  .bg-trading-tools {
    background: url('/src/assets/img/bg-trading-tools.webp');
    background-size: cover;
    background-position: center;
  }
  .max-h-0 {
    max-height: 0;
  }
</style>
